<template>
    <div shadow="hover">
        <div ref="echarts1" style="height: 250px;width:400px ;"></div>
    </div>
</template>

<script>
import * as echarts from 'echarts'
export default {
data() {
    return {}
},
mounted() {
    const echarts1 = echarts.init(this.$refs.echarts1)
    var option = {
        // backgroundColor: '#080b30',
        title: {
            text: '净儒小坛编程语言热度排行',
            textStyle: {
                align: 'center',
                color: '#fff',
                fontSize: 15,
            },
            left: 100,
            top: 1
        },
        tooltip: {
            trigger: 'axis',
            axisPointer: {
                lineStyle: {
                    color: {
                        type: 'linear',
                        x: 0,
                        y: 0,
                        x2: 0,
                        y2: 1,
                        colorStops: [
                            {
                                offset: 0,
                                color: 'rgba(0, 255, 233,0)',
                            },
                            {
                                offset: 0.5,
                                color: 'rgba(255, 255, 255,1)',
                            },
                            {
                                offset: 1,
                                color: 'rgba(0, 255, 233,0)',
                            },
                        ],
                        global: false,
                    },
                },
            },
        },
        legend: {
            data: ['Java', 'python', 'c++'],
            orient: 'horizontal',   // 水平
            type: 'plain',          // 普通图例
            icon: "circle",
            top: 25,
            left: 200,
            // right: '5%',
            // bottom: '15%',
            //width:280,              // 宽度
            itemGap: 2,            // 间隔
            itemWidth: 10,          // 图形宽度。
            itemHeight: 10,         // 图形高度。
            borderWidth: 0,
            textStyle: {
                fontSize: '14px',
                color: '#4ca9ff',
            }
        },
        grid: {
            top: '10%',
            left: '14%',
            right: '15%',
            bottom: '15%',
            // containLabel: true
        },
        xAxis: [
            {
                type: 'category',
                axisLine: {
                    show: true,
                    lineStyle: {
                        color: '#56a4cd',
                    },
                },
                splitArea: {
                    // show: false,
                    color: '#f00',
                    lineStyle: {
                        color: '#f00',
                    },
                },
                axisLabel: {
                    color: '#00b3f4',
                },
                splitLine: {
                    show: false,
                },
                "axisTick":{       //y轴刻度线
                "show":false
                },
                boundaryGap: false,
                data: ['2018','2019', '2020', '2021', '2022',],
            },
        ],

        yAxis: [
            {
                type: 'value',
                min: 0,
                // max: 140,
                splitNumber: 4,
                splitLine: {
                    show: false,
                    lineStyle: {
                        color: 'rgba(255,255,255,0.1)',
                    },
                },
                axisLine: {
                    show: true,
                    lineStyle: {
                        color: '#56a4cd',
                    },
                },
                axisLabel: {
                    show: true,
                    margin: 20,
                    textStyle: {
                        color: '#d1e6eb',
                    },
                },
                axisTick: {
                    show: false,
                },
            },
        ],
        series: [
            {
                name: 'Java',
                type: 'line',
                smooth: true, //是否平滑
                showAllSymbol: true,
                // symbol: 'image://./static/images/guang-circle.png',
                symbol: 'circle',
                symbolSize: 10,
                lineStyle: {
                    normal: {
                        color: '#00b3f4',
                        shadowColor: 'rgba(0, 0, 0, .3)',
                        shadowBlur: 0,
                        shadowOffsetY: 5,
                        shadowOffsetX: 5,
                    },
                },
                label: {
                    show: true,
                    position: 'top',
                    textStyle: {
                        color: '#00b3f4',
                    },
                },
                itemStyle: {
                    color: '#00b3f4',
                    borderColor: '#fff',
                    borderWidth: 3,
                    shadowColor: 'rgba(0, 0, 0, .3)',
                    shadowBlur: 0,
                    shadowOffsetY: 2,
                    shadowOffsetX: 2,
                },
                tooltip: {
                    show: false,
                },
                areaStyle: {
                    normal: {
                        color: new echarts.graphic.LinearGradient(
                            0,
                            0,
                            0,
                            1,
                            [
                                {
                                    offset: 0,
                                    color: 'rgba(0,179,244,0.3)',
                                },
                                {
                                    offset: 1,
                                    color: 'rgba(0,179,244,0)',
                                },
                            ],
                            false
                        ),
                        shadowColor: 'rgba(0,179,244, 0.9)',
                        shadowBlur: 20,
                    },
                },
                data: [4589, 6689, 7895, 3598, 5555, 5879],
            },
            {
                name: 'python',
                type: 'line',
                smooth: true, //是否平滑
                showAllSymbol: true,
                // symbol: 'image://./static/images/guang-circle.png',
                symbol: 'circle',
                symbolSize: 10,
                lineStyle: {
                    normal: {
                        color: '#00ca95',
                        shadowColor: 'rgba(0, 0, 0, .3)',
                        shadowBlur: 0,
                        shadowOffsetY: 5,
                        shadowOffsetX: 5,
                    },
                },
                label: {
                    show: true,
                    position: 'top',
                    textStyle: {
                        color: '#00ca95',
                    },
                },

                itemStyle: {
                    color: '#00ca95',
                    borderColor: '#fff',
                    borderWidth: 3,
                    shadowColor: 'rgba(0, 0, 0, .3)',
                    shadowBlur: 0,
                    shadowOffsetY: 2,
                    shadowOffsetX: 2,
                },
                tooltip: {
                    show: false,
                },
                areaStyle: {
                    normal: {
                        color: new echarts.graphic.LinearGradient(
                            0,
                            0,
                            0,
                            1,
                            [
                                {
                                    offset: 0,
                                    color: 'rgba(0,202,149,0.3)',
                                },
                                {
                                    offset: 1,
                                    color: 'rgba(0,202,149,0)',
                                },
                            ],
                            false
                        ),
                        shadowColor: 'rgba(0,202,149, 0.9)',
                        shadowBlur: 20,
                    },
                },
                data: [8754, 4568, 6589, 4569, 4897, 3654],
            },
            {
                name: 'c++',
                type: 'line',
                smooth: true, //是否平滑
                showAllSymbol: true,
                // symbol: 'image://./static/images/guang-circle.png',
                symbol: 'circle',
                symbolSize: 10,
                lineStyle: {
                    normal: {
                        color: '#ffde32',
                        shadowColor: 'rgba(0, 0, 0, .3)',
                        shadowBlur: 0,
                        shadowOffsetY: 5,
                        shadowOffsetX: 5,
                    },
                },
                label: {
                    show: true,
                    position: 'top',
                    textStyle: {
                        color: '#ffde32',
                    },
                },

                itemStyle: {
                    color: '#ffde32',
                    borderColor: '#fff',
                    borderWidth: 1,
                    shadowColor: 'rgba(0, 0, 0, .3)',
                    shadowBlur: 0,
                    shadowOffsetY: 2,
                    shadowOffsetX: 2,
                },
                tooltip: {
                    show: false,
                },
                areaStyle: {
                    normal: {
                        color: new echarts.graphic.LinearGradient(
                            0,
                            0,
                            0,
                            1,
                            [
                                {
                                    offset: 0,
                                    color: 'rgba(255,222,50,0.3)',
                                },
                                {
                                    offset: 1,
                                    color: 'rgba(255,222,50,0.3)',
                                },
                            ],
                            false
                        ),
                        shadowColor: 'rgba(255,222,50,0.3)',
                        shadowBlur: 20,
                    },
                },
                data: [2356,5897,5548,2654,3548,4562],
            }
        ],
    };
    echarts1.setOption(option)
}
};
</script>
<style scoped>

</style>